import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Picker, Image, Text, Switch, Input, Form, Button } from "@tarojs/components-rn";
import PageFooterInfo from "../../components/PageFooterInfo";
import { AtImagePicker } from 'taro-ui';
import { enterpriseQualificationArr, getRuntime } from "../../utils/common";
import { toJS } from 'mobx';
import { inject, observer } from "@tarojs/mobx-rn";
import page1_step_threeStyleSheet from "./page1_step_three_styles";

import right from '../../assets/img/right.png';
import point_on from '../../assets/img/icon_23.png';
import line_on from '../../assets/img/icon_24.png';
var _styleSheet = page1_step_threeStyleSheet;

function _getClassName() {
  var className = [];
  var args = arguments[0];
  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();

  if (type === 'string') {
    args = args.trim();
    args && className.push(args);
  } else if (type === 'array') {
    args.forEach(function (cls) {
      cls = _getClassName(cls).trim();
      cls && className.push(cls);
    });
  } else if (type === 'object') {
    for (var k in args) {
      k = k.trim();

      if (k && args.hasOwnProperty(k) && args[k]) {
        className.push(k);
      }
    }
  }

  return className.join(' ').trim();
}

function _getStyle(classNameExpression) {
  var className = _getClassName(classNameExpression);

  var classNameArr = className.split(/\s+/);
  var style = [];

  if (classNameArr.length === 1) {
    style.push(_styleSheet[classNameArr[0].trim()]);
  } else {
    classNameArr.forEach(function (cls) {
      style.push(_styleSheet[cls.trim()]);
    });
  }

  return style;
}

let Page1_step_two = class Page1_step_two extends Component {
  constructor(props) {
    super(props);
    this.state = {
      qualificationLevelArr: enterpriseQualificationArr,
      qualificationLevel: '',
      relatedInformationArr: [],
      relatedInformation: '',
      personInCharge: '',
      phoneNumber: '',
      emailAddress: '',
      isChooseBank: false,
      bankNameArr: [],
      currentBankIndex: 0,
      bankName: '',
      isAboutArchitecture: false,
      loading: false,
      id: null
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '工程保函中心' });
    this.getAllBank();
    let projectInsurance = getRuntime().getStorage('projectInsurance');
    if (!projectInsurance) {
      getRuntime().showToast('参数错误, 请重试~');
      setTimeout(() => {
        getRuntime().navigateTo('/pages/finance/page1');
      }, 2000);
      return;
    }
    this.setState({ id: parseInt(projectInsurance.id) });
  }
  getAllBank() {
    let { userStore } = this.props.stores;
    userStore.getBanks({
      callback: res => {
        let allBank = toJS(res.items);
        if (allBank) {
          this.setState({
            bankNameArr: allBank
          });
        }
      }
    });
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  onChangeBank(type, e) {
    this.setState({
      [type]: e.detail.value
    });
  }
  onChangePicker(type, e) {
    this.setState({
      [type]: this.state[type + 'Arr'][e.detail.value]
    });
  }
  onChangeImg(type, e) {
    if (e.length <= 0) {
      return false;
    }
    getRuntime().uploadFile(e, res => {
      this.setState({
        [type]: res.join(','),
        [type + 'Arr']: e
      });
    });
  }
  changeBank(e) {
    this.setState({
      currentBankIndex: e.detail.value,
      bankName: this.state.bankNameArr[e.detail.value]['bankName']
    });
  }
  submit(e) {
    let { id, qualificationLevel, relatedInformation, isChooseBank, bankName, isAboutArchitecture } = this.state;
    let { personInCharge, phoneNumber, emailAddress } = e.detail.value;
    if (!qualificationLevel) {
      getRuntime().showToast('请选择资质等级~');
      return;
    }
    if (!relatedInformation) {
      getRuntime().showToast('请上传相关资料~');
      return;
    }
    if (!personInCharge) {
      getRuntime().showToast('请填写负责人~');
      return;
    }
    if (!phoneNumber) {
      getRuntime().showToast('请填写联系电话~');
      return;
    }
    let { FinancialCenterStore } = this.props.stores;
    FinancialCenterStore.saveSuretyBondInfo({
      form: {
        id,
        qualificationLevel,
        relatedInformation,
        personInCharge,
        phoneNumber,
        emailAddress,
        isChooseBank,
        bankName,
        isAboutArchitecture
      },
      callback: res => {
        getRuntime().navigateTo(`/pages/finance/finance_success`);
      }
    });
  }
  componentDidHide() {
    // Taro.removeStorageSync('projectInsurance')
  }
  render() {
    let { isChooseBank, qualificationLevelArr, qualificationLevel, relatedInformationArr, bankNameArr, currentBankIndex } = this.state;
    return <View style={[_styleSheet["result-wrap"], { 'padding-top': '0', 'padding-bottom': 0 }]}>
        <View style={_styleSheet["step-line"]}>
          <View style={_styleSheet["step-icon"]}>
            <Image src={point_on} style={_styleSheet["point"]} />
            <Image src={line_on} style={_styleSheet["line"]} />
            <Image src={point_on} style={_styleSheet["point"]} />
            <Image src={line_on} style={_styleSheet["line"]} />
            <Image src={point_on} style={_styleSheet["point"]} />
          </View>
          <View style={_styleSheet["step-content"]}>
            <Text style={[_styleSheet["title"], _styleSheet["color-light"]]}>保费计算</Text>
            <Text style={[_styleSheet["title"], _styleSheet["color-light"]]}>提交资料</Text>
            <Text style={[_styleSheet["title"], _styleSheet["color-light"]]}>预约办理</Text>
          </View>
        </View>

        <Form onSubmit={this.submit.bind(this)}>
          <View style={[_styleSheet["from-wrap"], _styleSheet["p0"]]}>
            <View style={_styleSheet["item-group"]}>
              <View style={[_styleSheet["input-group"], _styleSheet["input-upload"], _styleSheet["bbnone"]]}>
                <View style={_styleSheet["input-name"]}>上传相关资料(营业执照/保函格式/招标文件)</View>
                <AtImagePicker length={4} count={2} showAddBtn={true} files={relatedInformationArr} onChange={this.onChangeImg.bind(this, 'relatedInformation')} />
              </View>
            </View>

            <View style={[_styleSheet["item-group"], _styleSheet["pt0"], _styleSheet["pb0"]]}>
              <View style={_styleSheet["input-group"]}>
                <View style={_styleSheet["input-name"]}>资质等级</View>
                <Picker mode="selector" range={qualificationLevelArr} onChange={this.onChangePicker.bind(this, 'qualificationLevel')} style={_styleSheet["input-picker"]}>
                  <View style={_styleSheet["tt"]}>
                    {!qualificationLevel && <View style={[_styleSheet["from-input"], _styleSheet["picker-con"], _styleSheet["placeholder-class"]]}>点击选择</View>}
                    {qualificationLevel && <View style={[_styleSheet["from-input"], _styleSheet["picker-con"]]}>{qualificationLevel}</View>}
                    <Image src={right} style={_styleSheet["drop-down-icon"]} />
                  </View>
                </Picker>
              </View>

              <View style={[_styleSheet["input-group"], _styleSheet["input-switch"]]}>
                <View style={_styleSheet["input-name"]}>是否对银行有要求</View>
                <Switch color="#00a0e9" name="isChooseBank" onChange={this.onChangeBank.bind(this, 'isChooseBank')} style={_styleSheet["switch"]} />
              </View>

              <View style={_getStyle(isChooseBank ? 'sub-bank sub-bank-on' : 'sub-bank')}>
                <View style={_styleSheet["input-group"]}>
                  <View style={_styleSheet["input-name"]}>银行</View>
                  <Picker mode="multiSelector" rangeKey="bankName" range={[bankNameArr]} onChange={this.changeBank.bind(this)} style={_styleSheet["input-picker"]}>
                    <View style={_styleSheet["tt"]}>
                      <View style={[_styleSheet["from-input"], _styleSheet["picker-con"]]}>{bankNameArr.length > 0 && bankNameArr[currentBankIndex]['bankName']}</View>
                      <Image src={right} style={_styleSheet["drop-down-icon"]} />
                    </View>
                  </Picker>
                </View>

                <View style={[_styleSheet["info"], _styleSheet["color-light"]]}>
                  要求：1、出具保函承诺书;2、董事会（股东会）决议、成员签字样本;3、反担保保证合同;4、保证额度使用申请书;5、保函收妥确认书。
                </View>
              </View>

              <View style={[_styleSheet["input-group"], _styleSheet["input-switch"]]}>
                <View style={_styleSheet["input-name"]}>是否从事建筑行业</View>
                <Switch name="isAboutArchitecture" color="#00a0e9" onChange={this.onChangeBank.bind(this, 'isAboutArchitecture')} style={_styleSheet["switch"]} />
              </View>
            </View>

            <View style={[_styleSheet["item-group"], _styleSheet["pt0"], _styleSheet["pb0"]]}>
              <View style={_styleSheet["input-group"]}>
                <View style={_styleSheet["input-name"]}>负责人</View>
                <Input name="personInCharge" placeholderClass="placeholder_class" placeholder="请填写负责人" style={_styleSheet["from-input"]} />
              </View>
              <View style={_styleSheet["input-group"]}>
                <View style={_styleSheet["input-name"]}>联系电话</View>
                <Input name="phoneNumber" placeholderClass="placeholder_class" placeholder="请填写联系电话" style={_styleSheet["from-input"]} />
              </View>
              <View style={_styleSheet["input-group"]}>
                <View style={_styleSheet["input-name"]}>联系邮箱</View>
                <Input name="emailAddress" placeholderClass="placeholder_class" placeholder="请填写联系邮箱" style={_styleSheet["from-input"]} />
              </View>
            </View>
          </View>
          <Button formType="submit" style={_styleSheet["page-submit"]}>立即预约办理</Button>
        </Form>
        <PageFooterInfo />
        <View style={_styleSheet["footer-block"]} />

      </View>;
  }
};
Page1_step_two = tslib_1.__decorate([inject("stores"), observer], Page1_step_two);
export default Page1_step_two;